<template>
  <div class="content" v-loading="villageListLoading">
    <div class="recommend-position">
      <div class="block"></div>
      <div class="title" style="font-family: 'fzhzgbjianti';">
        家门口就业
      </div>
    </div>
    <div class="bottom-block">
      <div class="info-list"  v-for="(item,index) in villageList" :key="item.id" @click="skip(item.id,item.name)">
        <div class="info-item" style="background: #EAFAED" v-if="index+1==1||index+1==6||index+1==9||index+1==14||index+1==17">
          <div class="title">{{ item.name }}</div>
          <div class="count-block">
            <div class="count">{{ item.count }}个</div>
            <img src="@/assets/index/go.png" alt="">
          </div>
        </div>
        <div class="info-item" style="background: #FFF5F4" v-else-if="index+1==2||index+1==8||index+1==12||index+1==13||index+1==18">
          <div class="title">{{ item.name }}</div>
          <div class="count-block">
            <div class="count">{{ item.count }}个</div>
            <img src="@/assets/index/go.png" alt="">
          </div>
        </div>
        <div class="info-item" style="background: #FEF7ED" v-else-if="index+1==3||index+1==5||index+1==10||index+1==15||index+1==0||index+1==29">
          <div class="title">{{ item.name }}</div>
          <div class="count-block">
            <div class="count">{{ item.count }}个</div>
            <img src="@/assets/index/go.png" alt="">
          </div>
        </div>
        <div class="info-item" style="background: #EBFAFF" v-else-if="index+1==4||index+1==7||index+1==11||index+1==16||index+1==19">
          <div class="title">{{ item.name }}</div>
          <div class="count-block">
            <div class="count">{{ item.count }}个</div>
            <img src="@/assets/index/go.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPublishListApi,
  getStreetListApi,
  getStreetDataApi
} from '@/api/nearby'

export default {
  name: "Nearby",
  data(){
    return{
      // a1:'background-color: #ECFAED',
      villageListLoading:false,
      villageList:[
      ]
    }
  },
  methods:{
    skip(id,name){
      sessionStorage.setItem('currentPage','1');
      this.$router.push({ name: 'Results',params:{streetId:id,name:name } })
    },
    getStreetList(){
      this.villageListLoading = true
      getStreetListApi({page:this.page,limit:this.limit}).then((res) => {
        this.villageList = res.yumen
        
      }).finally(()=>{
        this.villageListLoading = false
      })
    },
  },
  mounted() {
    // this.getList()
    this.utils.createParams(this, this.$route.query);
    this.getStreetList()
    // this.getStreetData()
  }
}
</script>

<style lang="scss" scoped>
.content{
  .recommend-position{
    width: 800px;
    margin: 30px auto;
    height: 70px;
    background-color: #fff;
    color: #498CF3;
    padding: 0 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .block{
      background-color: #498CF3;
      width: 10px;
      height: 37px;
      border-radius: 15px;
      margin-right: 15px;
    }
    .title{
      font-size: 25px;
      padding-top: 3px;
      //font-weight: 900;
      //padding-bottom: 3px;
    }
  }
  .bottom-block{
    display: flex;
    flex-flow: row wrap;
    //height: 540px;
    width: 800px;
    border-radius: 20px;
    margin: 30px auto;
    .info-list{
      width: calc((100% - 100px) / 4);
      height: 200px;
      border-radius: 20px;
      margin:11px;
      .info-item{
        width: 100%;
        height: 90%;
        padding: 20px;
        background-color: #ECFAED;
        border-radius: 20px;
        box-sizing: border-box;
        margin-right: 20px;
        font-size: 25px;
        cursor: pointer;
        .title{
          font-size: 20px;
          margin: 30px 0 40px 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .count-block{
          display: flex;
          justify-content: space-between;
          margin: 0 10px;
          height: calc((100% - 10px)/3);
          img{
            height: calc((100% - 0px)/1.18518519);
          }
          .count{
            color: #2F7CFF;
          }
        }
      }
    }


  }
}
</style>
